<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="../templates/ui.xhtml">
    
	<ui:define name="content">
		<h1 class="title ui-widget-header ui-corner-all">PanelMenu</h1>
		<div class="entry">
			<p>PanelMenu is a hybrid of accordion-tree components used for navigations and actions.</p>
			
			<h:form>
			
				<p:growl id="messages" autoUpdate="true"/>
                                
                <p:panelMenu style="width:200px">
					<p:submenu label="Ajax Menuitems">
						<p:menuitem value="Save" actionListener="#{buttonBean.save}" icon="ui-icon-disk" />
						<p:menuitem value="Update" actionListener="#{buttonBean.update}"  icon="ui-icon-arrowrefresh-1-w" />
					</p:submenu>
					<p:submenu label="Non-Ajax Menuitem">
						<p:menuitem value="Delete" actionListener="#{buttonBean.delete}"  ajax="false" icon="ui-icon-close"/>
					</p:submenu>
                    <p:separator />
					<p:submenu label="Navigations" >
						<p:submenu label="Links" icon="ui-icon-extlink">
                            <p:submenu label="PrimeFaces" icon="ui-icon-heart">
                                <p:menuitem value="Home" url="http://www.primefaces.org" icon="ui-icon-home" />
                                <p:menuitem value="Docs" url="http://www.primefaces.org/documentation.html" icon="ui-icon-document" />
                                <p:menuitem value="Download" url="http://www.primefaces.org/downloads.html" icon="ui-icon-arrowthick-1-s" />
                                <p:menuitem value="Support" url="http://www.primefaces.org/support.html" icon="ui-icon-wrench" />
                            </p:submenu>
						</p:submenu>
                        <p:menuitem value="Mobile" outcome="/mobile/index" icon="ui-icon-signal" />
					</p:submenu>
				</p:panelMenu>

            </h:form>
			
			<h3>Source</h3>
			<p:tabView>
				<p:tab title="panelMenu.xhtml">
                    <pre name="code" class="xml">
&lt;h:form&gt;
			
    &lt;p:growl id="messages" autoUpdate="true"/&gt;

    &lt;p:panelMenu style="width:200px"&gt;
        &lt;p:submenu label="Ajax Menuitems"&gt;
            &lt;p:menuitem value="Save" actionListener="\#{buttonBean.save}" icon="ui-icon-disk" /&gt;
            &lt;p:menuitem value="Update" actionListener="\#{buttonBean.update}"  icon="ui-icon-arrowrefresh-1-w" /&gt;
        &lt;/p:submenu&gt;
        &lt;p:submenu label="Non-Ajax Menuitem"&gt;
            &lt;p:menuitem value="Delete" actionListener="\#{buttonBean.delete}"  ajax="false" icon="ui-icon-close"/&gt;
        &lt;/p:submenu&gt;
        &lt;p:separator /&gt;
        &lt;p:submenu label="Navigations" &gt;
            &lt;p:submenu label="Links" icon="ui-icon-extlink"&gt;
                &lt;p:submenu label="PrimeFaces" icon="ui-icon-heart"&gt;
                    &lt;p:menuitem value="Home" url="http://www.primefaces.org" icon="ui-icon-home" /&gt;
                    &lt;p:menuitem value="Docs" url="http://www.primefaces.org/documentation.html" icon="ui-icon-document" /&gt;
                    &lt;p:menuitem value="Download" url="http://www.primefaces.org/downloads.html" icon="ui-icon-arrowthick-1-s" /&gt;
                    &lt;p:menuitem value="Support" url="http://www.primefaces.org/support.html" icon="ui-icon-wrench" /&gt;
                &lt;/p:submenu&gt;
            &lt;/p:submenu&gt;
            &lt;p:menuitem value="Mobile" outcome="/mobile/index" icon="ui-icon-signal"/&gt;
        &lt;/p:submenu&gt;
    &lt;/p:panelMenu&gt;

&lt;/h:form&gt;
                    </pre>
				</p:tab>
			</p:tabView>
      	</div>
 
</ui:define>
</ui:composition>
				